<template>
  <div class=""></div>
  <Navi title="个人中心"></Navi>
  <div class="main">
    <div class="head" v-show="true" @click="user_data()">
      <div class="user_message">
        <img class="head_icon" :src="data.head_icon" @error="imgOnerror" />
        <div class="data">
          <div class="name">
            {{ data.name || "游客" }}
          </div>
          <div class="id">用户ID {{ data.user_id }}</div>
        </div>
        <div
          style="
            flex: 1;
            display: flex;
            justify-content: flex-end;
            margin-right: 39rem;
          "
        >
          <img
            :src="require('../../assets/w_back.png')"
            alt=""
            srcset=""
            style="transform: rotate(180deg); width: 30rem"
          />
        </div>
      </div>
      <div class="generalize" style="display: none">
        <div class="generalize_money" @tap.stop="jump('my_money')">
          <div class="num">
            {{ data.money }}
          </div>
          <div class="title">推广佣金</div>
        </div>
        <div class="line"></div>
        <div class="generalize_money" @tap.stop="jump('popularize_num')">
          <div class="num">
            {{ data.popularize_num }}
          </div>
          <div class="title">推广人数</div>
        </div>
      </div>
    </div>

    <div
      class="head"
      style="
        font-size: 36rem;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
      "
      v-if="false"
    >
      <div class="user_message">
        <img
          class="head_icon"
          :src="require('../../assets/default_head.png')"
          mode=""
        />
        <div class="data">登录</div>
      </div>
      <div class="generalize">
        <div class="generalize_money" @tap.stop="jump('my_money')">--</div>
        <div class="line"></div>
        <div class="generalize_money" @tap.stop="jump('popularize_num')">
          --
        </div>
      </div>
    </div>
    <div class="menu">
      <div class="title">
        <div class="notice"></div>
        <text>功能专区</text>
      </div>
      <div class="list">
        <div
          class="item bulingText"
          v-for="(item, index) in platform_app"
          :key="index"
          @click.stop="jump(item, item.type)"
        >
          <img :src="item.image" mode="" />
          <text>{{ item.text }}</text>
        </div>
      </div>
    </div>

    <Tabbar :indexs="3"></Tabbar>
  </div>
</template>

<script>
export default {
  created() {
    this.data = JSON.parse(sessionStorage.getItem("user_data"));
  },
  data() {
    return {
      settime: null,
      data: {},

      platform_app: [
        {
          image: require("@/assets/img/user_center/my_diary.png"),
          text: "我的贴子",
          path: "/my/my_diary?type=0",
          type: "menu",
        },
        {
          image: require("../../assets/setting.png"),
          text: "安全设置",
          path: "security_settings",
          type: "menu",
        },
        {
          image: require("../../assets/store.png"),
          text: "我的收藏",
          path: "/my/my_diary?type=1",
          type: "menu",
        },
        {
          image: require("../../assets/theme.png"),
          text: "主题",
          path: "about_me",
          type: "menu",
        },
        {
          image: require("../../assets/theme.png"),
          text: "意见反馈",
          path: "/my/faceback",
          type: "menu",
        },
        {
          image: require("@/assets/img/user_center/exit.png"),
          text: "退出登录",
          path: "/login",
          type: "exit",
        },
      ],
    };
  },

  methods: {
    imgOnerror(e) {
      let img = e.srcElement;
      console.log(e);
      img.src = require("@/assets/default_head.png");
      img.onerror = null;
    },
    user_data() {
      this.$router.push("/user_data");
    },
    get_data() {
      this.$ajax
        .fetch({
          url: "adviser/info",
          methods: "get",
          data: {
            company_id: uni.getStorageSync("company_id") || 0,
          },
        })
        .then((res) => {
          clearTimeout(this.settime);
          uni.stopPullDownRefresh();
          if (res.data.code == 0) {
            this.data = res.data.data;
          } else {
            this.$test_res(res);
          }
        });
    },
    jump(item, type) {
      if (type == "menu") {
        this.$router.push(item.path);
      } else if (type === "exit") {
        this.$router.replace(item.path);
        sessionStorage.clear();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.lock {
  position: fixed;
  width: 750rem;
  height: calc(100vh - 98rem);
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 9;
}
.main {
  margin: 72rem 30rem;
  margin-top: 0rem;
}
.head {
  border-radius: 10rem;
  width: 688rem;
  height: 275rem;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../../assets/account_bg.png");
  .user_message {
    padding: 38rem 0 0 34rem;
    display: flex;
    align-items: center;
    .head_icon {
      background: #fff;
      display: block;
      width: 120rem;
      height: 120rem;
      border-radius: 50%;
      border: 5rem solid #fff;
    }
    .data {
      height: 100%;
      margin-left: 16rem;
      line-height: 120rem;
      .name {
        font-size: 36rem;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
      }
      .id {
        margin-top: 18rem;
        font-size: 22rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #b9deff;
      }
    }
  }
  .generalize {
    margin: 81rem 65rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .generalize_money {
      min-width: 219rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      .num {
        font-size: 50rem;
        font-family: DIN;
        font-weight: 500;
        color: #ffffff;
      }
      .title {
        font-size: 25rem;
        margin-top: 10rem;
        color: #fff;
      }
    }
    .line {
      width: 1rem;
      height: 45rem;
      background: #ffffff;
    }
  }
}


.menu{
  margin-top:46rem ;
  .title{
    margin-bottom: 20rem;
    position: relative;
    font-size: 30rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #303133;
    display: flex;
    align-items: center;
    height: 32rem;
    text {
      margin-left: 16rem;
    }
    .notice {
      width: 10rem;
      height: 32rem;
      border-radius: 5rem;
      background-image: linear-gradient(#71c4ff, #1360d6);
    }
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    .item {
      margin-bottom: 15rem;
      width: 25%;
      height: 133rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 80rem;
        height: 80rem;
      }
      text {
        margin-top: 25rem;
        font-size: 28rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #303133;
      }
    }
    .item:nth-last-of-type(1) {
      margin-right: 0rem;
    }
  }
}
</style>
